import {
  getPickingDetailsByPage,
  addPickingDetails,
  updatePickingDetails,
  addMaterialQty,
} from '@/services/product/pickingDetails';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { SearchProps } from 'antd/lib/input';
const PickingDetails = React.forwardRef((props, ref) => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const [pickingTaskCode, setPickingTaskCode] = useState();
  const { Search } = Input;
  const [tabState, setTabState] = useState('');
  const refs = useRef(null);
  useEffect(() => {
    console.log(props);
    setPickingTaskCode(props.pickingTaskCode);
    setTabState(props.tabState)
  }, [props.pickingTaskCode]);
  const onSearch: SearchProps['onSearch'] = (info) => {
    setPickingTaskCode(info);
    actionRef.current!.reload();
  };
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '物料名称',
      dataIndex: 'materialName',
      align: 'center',
      sorter: true,
    },
    {
      title: '物料编号',
      dataIndex: 'materialCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '规格',
      dataIndex: 'materialSpec',
      align: 'center',
      sorter: true,
    },
    {
      title: '单位',
      dataIndex: 'unit',
      align: 'center',
      sorter: true,
    },
    {
      title: '位置号',
      dataIndex: 'positionNo',
      align: 'center',
      sorter: true,
    },
    {
      title: '需求数量',
      dataIndex: 'materialQty',
      align: 'center',
      sorter: true,
    },
    {
      title: '已分数量',
      dataIndex: 'outboundQty',
      align: 'center',
      sorter: true,
    },
    {
      title: '未分数量',
      dataIndex: 'notIssuedQty',
      align: 'center',
      sorter: true,
    },
    {
      title: '接收数量',
      dataIndex: 'claimedQty',
      align: 'center',
      sorter: true,
    },
    {
      title: '未收数量',
      dataIndex: 'unclaimedQty',
      align: 'center',
      sorter: true,
    },
  ];

  useImperativeHandle(ref, () => {
    return actionRef.current!.reload();
  });

  //结果过滤，如果是已接收，则不返回接受数量为0的物料
  const filterResult = (result: any) => {
    let newResult = result;
    if(tabState === '2'){
      newResult = result.filter(item => item.claimedQty != 0)
    }
    return newResult;
  }

  return (
    <>
      <ProTable
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={refs}
        search={false}
        onRow={(record) => ({
          onClick: async (a) => {
            a.stopPropagation();
            let s = a.target.parentNode.parentNode.childNodes;
            console.log(s,'s');
            // 先重置为默认样式
            for (var i = 0; i < s.length; i++) {
              s[i].style.color = '#000000d9';
              s[i].style.fontWeight = 'normal';
              s[i].style.backgroundColor = '#fff';
            }
            // 再设置高亮样式
            a.target.parentNode.style.color = '#13C2C2';
            a.target.parentNode.style.fontWeight = 'bold';
            a.target.parentNode.style.backgroundColor = '#e6fffb'
          },
        })}
        toolbar={{
          search: (
            <div className="pickingReceiveSearch">
              <Search
                addonBefore={<SearchOutlined />}
                placeholder="请输入物料代码"
                allowClear
                enterButton="筛选物料信息"
                onSearch={onSearch}
              />
            </div>
          ),
        }}
        request={async (params = {}, sort, filter) => {
          if (pickingTaskCode === undefined) {
            return {
              data: undefined,
            };
          }
          const sorters = sortTran(sort);
          const filters = [
            {
              andOr: 'and',
              field: 'pickingTaskCode',
              operator: 'eq',
              value: pickingTaskCode,
            },
          ];
          const result = await getPickingDetailsByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          console.log(result, 'sub_res');
          let newResult = filterResult(result.data.content);
          console.log(newResult,'filter');
          return {
            data: newResult,
            total: newResult.length,
            success: result.success,
          };
        }}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            onClick={() => {
              setPickingTaskCode(undefined);
            }}
            type="primary"
          >
            重置
          </Button>,
        ]}
        columns={columns}
        scroll={{ x: 2000, y: 200 }}
        rowSelection={{}}
      />
    </>
  );
});
export default PickingDetails;
